<template>
    <modal-view title="实时预览" :showFooter="false" @close="showModal = false" v-if="showModal">
        <div class="page-wrap" v-loading="loading">
            <div class="page-cont" v-if="detailData.id">
                <template v-for="(item, index) of comps" :key="index">
                    <div v-if="item.show">
                        <a-divider style="margin: 0" v-if="index !== 0" />
                        <component
                            :ref="setCompsItemRef(item)"
                            :is="item.comName"
                            :detail="detailData"
                            :disabled="item.disabled"
                            :hasAuth="hasAuth"
                            :stepStatus="processStepStatus"
                            :historyList="historyList"
                            @success="getDetailData"
                            @detailChange="detailChange"
                        />
                    </div>
                </template>
            </div>
        </div>
    </modal-view>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import api from '@/api';
import BaseInfo from './components/BaseInfo.vue';
import RelateFile from '@/views/version/versionDetail/components/RelateFile/index.vue';
import RelateRequire from '@/views/version/versionDetail/components/RelateRequire/index.vue';
import CheckProcess from './components/RelateProcess/CheckProcess/index.vue';
import ModalView from './ModalView.vue';
import { useRoute } from 'vue-router';
import store from '@/store';
const allComps = [{ comName: 'BaseInfo' }, { comName: 'RelateRequire' }, { comName: 'RelateFile' }];
import { defineComponent, unref, reactive, toRefs, computed, getCurrentInstance, onBeforeUnmount } from 'vue';
export default defineComponent({
    name: 'VersionDetail',
    components: {
        BaseInfo,
        RelateFile,
        RelateRequire,
        CheckProcess,
        ModalView
    },
    setup() {
        const route = useRoute();
        const instance: any = getCurrentInstance();
        const compsItemRefs: any = reactive({});
        const state = reactive<any>({
            form: {},
            processStepStatus: '', //对应流程类型下的某个节点
            loading: false,
            detailData: {},
            historyList: [], //历史记录
            hasAuth: false,
            comps: [],
            showModal: false
        });
        const empId = computed(() => {
            return store.getters.userInfo.employeeDTO.empId;
        });
        const disabled = computed(() => {
            // 确定需求基线,产品经理修改或者状态是待开始
            if (state.detailData.status === '1') {
                return !(state.detailData.createUserEmpId === unref(empId));
            } else if (['basicLine', 'productChange', 'productManagerReview', 'teamLeaderAduit', 'requireOnline'].includes(state.processStepStatus)) {
                return !state.hasAuth;
            } else {
                return true;
            }
        });
        const setCompsItemRef = (item) => (el) => {
            compsItemRefs[item.comName] = el;
        };
        const getDetailData = async () => {
            state.loading = true;
            const query = {
                id: route.query.id
            };
            const { success, moule, errorMsg } = await api.versionModel.findById(query);
            if (success) {
                state.detailData = { ...moule };
                // 进行中,才获取历史记录
                if (!state.detailData.replenishRecord) {
                    if (+state.detailData.status > 1 && +state.detailData.status <= 4) {
                        await getHistoryList();
                    }
                    // 进行中调流程节点
                    if (state.detailData.status === '2') {
                        await getProcessStatus();
                    }
                }
            } else {
                message.error(errorMsg);
            }
            state.loading = false;
            initComps();
        };
        // 获取历史记录列表
        const getHistoryList = async () => {
            const query = {
                instanceId: state.detailData.instanceId,
                type: 'version'
            };
            const { success, moule, errorMsg } = await api.historyModel.historyOperationByInstanceId(query);
            if (success) {
                if (moule && moule.length) {
                    state.historyList = [...moule];
                    // 审批节点操作人不是当前用户的无需显示
                    const target = state.historyList[state.historyList.length - 1];
                    if (target) {
                        state.hasAuth = target.assignee.indexOf(store.getters.userInfo.employeeDTO.empId) >= 0;
                    }
                }
            } else {
                message.error(errorMsg);
            }
        };
        const getProcessStatus = async () => {
            const query = {
                instanceId: state.detailData.instanceId
            };
            const { success, moule } = await api.productProcessModel.processStatus(query);
            if (success) {
                state.processStepStatus = moule;
            }
        };
        const detailChange = (data: Recordable) => {
            state.detailData = {
                ...state.detailData,
                ...data
            };
        };
        const open = () => {
            state.detailData = {};
            state.showModal = true;
            init();
        };
        const initComps = () => {
            state.comps = allComps.map((item) => ({
                ...item,
                show: true,
                disabled: true
            }));
        };
        const init = () => {
            getDetailData();
            instance.proxy.$mitt.on('updateVersionDetail', () => {
                getDetailData();
            });
        };
        onBeforeUnmount(() => {
            instance.proxy.$mitt.all.delete('updateVersionDetail');
        });
        return {
            ...toRefs(state),
            setCompsItemRef,
            disabled,
            empId,
            open,
            getDetailData,
            detailChange
        };
    }
});
</script>
<style lang="less" scoped >
.page-wrap {
    position: relative;
    height: 100%;
    .page-header-wrap {
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        background: #fff;
        &::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 100%;
            background: #fb7555;
            top: 0;
            left: 0;
            z-index: 120;
        }
    }
    .header-title {
        font-size: 20px;
        color: @title-font-color;
        font-weight: bold;
    }
    .page-cont {
        position: relative;
        margin-top: 24px;
        background: #fff;
    }
}
</style>